<style>
.longRend .mapRendDiv{
    position: fixed;
    background: white;
    bottom: 2.5rem;
    left: .5rem;
    padding: .5rem;
    border: 1px solid #ccc;
    font-size: 12px;
    background: rgba(0,0,0,.5);
    color: white;
} 
.longRend .mapRendDiv li{
      display: flex;
      flex-direction: row;
      align-items: center;
    padding: .5rem 0;
}
#container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
}

 .button-group {
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-size: 12px;
      padding: 10px;
}

 

.button-group .button {
      height: 28px;
      line-height: 28px;
      background-color: #0D9BF2;
      color: #FFF;
      border: 0;
      outline: none;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-bottom: 4px;
      cursor: pointer;
}

.button-group .inputtext {
      height: 26px;
      line-height: 26px;
      border: 1px;
      outline: none;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-bottom: 4px;
      cursor: pointer;
}

  

#tip {
      background-color: #fff;
      padding-left: 10px;
      padding-right: 10px;
      position: absolute;
      font-size: 12px;
      right: 10px;
      top: 20px;
      border-radius: 3px;
      border: 1px solid #ccc;
      line-height: 30px;
}
.amap-info-content {
      font-size: 12px;
} 
#myPageTop {
      position: absolute;
      top: 5px;
      right: 10px;
      background: #fff none repeat scroll 0 0;
      border: 1px solid #ccc;
      margin: 10px auto;
      padding:6px;
      font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
      font-size: 14px;
}

#myPageTop label {
      margin: 0 20px 0 0;
      color: #666666;
      font-weight: normal;
}
#myPageTop input {
      width: 170px;
}
#myPageTop .column2{
      padding-left: 25px;
}
.mapImg{
      height: 1.2rem;
      margin-right: .3rem;
}


/* 高德地图样式 */
</style>
<div class="longRend">
    <!-- S 导航 -->
    <tab></tab>
    <!-- 导航 E -->

         <!-- S 高德地图 -->
         <gaode-map options="mapOptions" style="height:100%">
            <div class="marker-route marker-marker-bus-from"></div>
         </gaode-map>
         <!-- 高德地图 E -->
         <ul class="mapRendDiv">
             <li> 
                  <img src="../gy/images/icon/chushou.png" alt="民宿" class="mapImg">  
                  民宿
             </li>
             <li> 
                  <img src="../gy/images/icon/changzu.png" alt="长租" class="mapImg">  
                   长租
             </li>
             <li> 
                  <img src="../gy/images/icon/chushou.png" alt="出售" class="mapImg">  
                   出售
             </li>
             <li>
                  <img src="../gy/images/icon/yingyefang.png" alt="营业房" class="mapImg">  
                   营业房
             </li>
         </ul>
    </div>













